.icon-button {
  line-height: 100%;
  cursor: pointer;
  font-size: 1.5rem;
  border: none;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: var(--el-color-primary-light-9);
  }
}

.icon-button:active {
  background-color: var(--el-color-primary-light-8);
}

.icon-button--disabled {
  cursor: not-allowed;
  background-color: #ccc;
}

.text-button {
  cursor: pointer;
  transition: color 0.3s ease;

  &:hover {
    color: var(--el-color-primary);
  }
}

.text-button:active {
  color: var(--el-color-primary-light-3);
}

.text-button--disabled {
  cursor: not-allowed;
  color: #ccc;
}

.text-link {
  // 常见的公告链接颜色 #409eff
  color: #16a3ad;
  cursor: pointer;
  transition: color 0.3s ease;

  &:hover {
    color: #16a3ad;
  }
}

.text-link:active {
  color: #1ebfca;
}

.text-link--disabled {
  cursor: not-allowed;
  color: #ccc;
}

.card {
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 1rem;
}

.card--shadow {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.menu--shadow {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.el-message-box {
  --el-messagebox-border-radius: 0.5rem;
}